<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <shopee-table class=stepExecuteData stripe :data="stepExecuteData" >
<!--        <shopee-table-column prop="id" label="序号" fixed="left" :width="150">-->
<!--        </shopee-table-column>-->

<!--        <shopee-table-column prop="executor" label="执行人" :width="250">-->
<!--        </shopee-table-column>-->

        <shopee-table-column prop="starttime" label="开始时间" :width="300">
        </shopee-table-column>

        <shopee-table-column prop="cost" label="耗时" :width="200">
        </shopee-table-column>

        <shopee-table-column prop="status" label="状态" :width="200">
        </shopee-table-column>


        <shopee-table-column label="操作" fixed="right" :width="250">
          <template slot-scope="props">

            <el-button  size="small" @click="viewDetails(props.row.log)" type="primary">查看日志</el-button>
            <el-button  size="small" @click="showResult(props.row.result)" type="primary">查看结果</el-button>
          </template>
        </shopee-table-column>
      </shopee-table>

      <el-dialog title="日志详情" :visible.sync="dialogVisible" width="60%">
        <text-editor v-model="dialogData"></text-editor>
      </el-dialog>

       <el-dialog title="执行结果"  :visible.sync="resultDialogVisible" width="55%" v-if="resultDialogVisible">
      <div id="markedResult" v-html="resultContent"></div>
    </el-dialog>


    </div>
  </el-card>
</template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";
    import TextEditor from "@/components/TextEditor";
    import {marked2Html} from "@/api/schedulex";
    export default {
      name : "TaskInstanceExecuteListTable",
      components:{
        TextEditor
      },
      data() {
        return {
          stepExecuteData: [],
          dialogVisible:false,
          dialogData:"",
          resultContent:"",
          resultDialogVisible:false
        }
      },
      methods: {
        init_data() {
          let params = {
            "id": this.$route.query.id
          }
          getRequest(api['step_execute_record_list'],params).then((res) => {
            res = res.resultReturn
            this.stepExecuteData= res.data
          }, (error) => {
            console.info(error)
          })
        },
        showResult(result){
          this.resultContent=marked2Html(result)
          this.resultDialogVisible=true
        },
         viewDetails(data) {
          this.dialogData=data
          this.dialogVisible= true
        }
      },
      created () {
        this.init_data()
      }
    }
  </script>
